<template>
    <div class="showBox">
      <div class="head">
        <select-store @handleChange="optionChange"/>
        <div class="serach">
          <el-input size="small" placeholder="请输入名称进行搜索"  v-model="searchKey"></el-input>
          <el-button size="mini" type="primary" round @click="searchBy">搜索</el-button>
        </div>
        <div class="add">
          <el-button type="primary" size="mini" round @click="add({data: orgSeq, type:'add'})">新增</el-button>
        </div>
      </div>

      <div class="table">
        <el-table :data="tableData" v-loading="lodings">
          <el-table-column type="index" label="序号" align="center" width="50"></el-table-column>
          <el-table-column prop="graName" label="酒柜名称" align="center"></el-table-column>
          <el-table-column prop="graCode" label="酒柜编号" align="center"></el-table-column>
          <el-table-column prop="orgName" label="所属门店" align="center"></el-table-column>
          <el-table-column prop="deviceName" label="摄像头" align="center"></el-table-column>
          <el-table-column prop="takeArea" label="拍摄区域" align="center"></el-table-column>
          <el-table-column prop="dzPhoto.state" label="定妆照" align="center">
            <template slot-scope="scope">
              <div class="table-column">
                <el-tag size="medium" style="margin-bottom: 0; cursor: pointer" :type="!!scope.row.fileUrl ? 'success':'danger'" @click="add({data:scope.row,type:'detail'})">
                {{!!scope.row.fileUrl?'已上传':'未上传'}}
              </el-tag>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="150">
            <template slot-scope="scope">
              <div v-if="!!scope.row.fileUrl">
                <el-button size="mini" type="primary" round @click="add({data:scope.row,type:'edit'})">修改</el-button>
                <el-button size="mini" type="danger" round @click="deleteBy(scope.row)">删除</el-button>
              </div>

            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="paging">
          <el-pagination
            :page-sizes="[10, 20, 30, 50, 100]"
            :page-size="pageSize"
            :current-page="currentPage"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="SizeChange"
            @current-change="CurrentChange"
          >
          </el-pagination>
      </div>
    </div>
</template>

<script>
    import {queryStoreOrgseq} from  '@/api/memberinfo'
    import { queryGradevinInfo, delGardInfoByUuid} from '@/api/smartShops'
    import selectStore from '../components/selectStore'
    export default {
        name: "Index",
      components: {selectStore},
        data(){
          return{
            lodings: false,
            orgSeq: '',
            options:[

            ],
            value:[],
            searchKey:'',
            tableData:[],
            pageSize:10,
            total:0,
            currentPage:1,
          }
        },
        methods:{
          SizeChange(size){
            this.pageSize=size;
            this.getData();
          },
          CurrentChange(current){
            this.currentPage=current;
            this.getData()
          },
          optionChange(val){
            this.orgSeq=val[val.length-1];
            this.getData();
          },
          getAllData(arr){
            this.orgSeq=arr[0];
            this.getData();
          },


          searchBy(){
            this.getData()
          },
          add({data=null,type}){
            this.$router.push({
              name:'wineInformationAdd',
              params:{data,type}}
              )
          },
         deleteBy(row){
            this.$confirm('确认要删除这条记录吗', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(async () => {
          let data = await delGardInfoByUuid({
            gradevinUuid: row.gradevinUuid
          });
          if (data.code === 1) {
            this.$message.success(data.message);
            this.getData()
          }
        }).catch(() => {
            this.$message({
              type: 'info',
              message: '删除失败'
            });
        });
          },
        async getData(){
            this.lodings = true
          let data  = await queryGradevinInfo({
            size: this.pageSize,
            current: this.currentPage,
            condition:{
              orgSeq: this.orgSeq,
              graName: this.searchKey
            }
          })
          this.lodings = false
          if(data.code === 1) {
            this.tableData = !!data.records ? data.records : [];
            this.total = data.total;
            return
          }
          this.tableData = [];
          this.$message.error(data.message)
        }
        },
      created() {
        this.orgSeq=JSON.parse(localStorage.getItem('logininfo')).orgList[0].orgSeq||'';
        this.value = [this.orgSeq]
      },
      mounted(){
          this.getData()
        }
    }
</script>

<style scoped lang="scss">
  .showBox{
    width: 100%;
    box-sizing: border-box;
    height: 100%;

    .head{
      border-bottom: 1px solid #DCDFE6;
      width: 100%;
      box-sizing: border-box;
      height: 50px;
      padding: 9px 0;
      display: flex;
      align-items: flex-end;
      position: relative;

      img{
        width: 30px;
        height: 32px;
        margin-right: 10px;
      }

      p{
        padding: 0 10px;
        font-size: 14px;
      }

      .selectStore{
        height: 32px;
        width: 300px;
        display: flex;
        align-items: center;

        .el-cascader{
          width: 200px;
        }
      }

      .serach{
        height: 100%;
        width: 280px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .el-input{
          width:210px;
        }
      }

      .add{
        width: 100px;
        height: 32px;
        position: absolute;
        right: 0;
        bottom: 10px;
        display: flex;
        align-items: flex-end;
        justify-content: center;

      }
    }
    .table{
      padding: 10px 15px;
      box-sizing: border-box;
      width: 100%;
    }

    .paging{
      height: 50px;
      width: 100%;
      line-height: 50px;
    }

  }
</style>

<style lang="scss">

</style>
